<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeft, Star, Share, Download, Message } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 课程信息
const courseInfo = ref({
  title: '团体心理辅导实战指南：在班会与活动中促进学生成长',
  instructor: '王教授',
  rating: 4.8,
  students: 1245,
  duration: '12小时30分钟',
  lastUpdated: '2023年10月15日',
  level: '中级',
  description: '本课程专为教师和心理辅导员设计，提供了丰富的团体心理辅导技巧和实践方法，帮助您在班会和各类活动中有效促进学生的心理健康和个人成长。通过系统学习，您将掌握如何设计和实施有针对性的团体活动，应对常见的学生心理问题，并创造积极的班级氛围。',
  objectives: [
    '掌握团体心理辅导的基本理论和方法',
    '学习如何设计适合不同年龄段学生的心理活动',
    '了解常见学生心理问题的识别和应对策略',
    '提高班级管理和团体引导的技巧',
    '学会评估团体活动的效果并持续改进'
  ],
  // f
  contents: [
    {
      title: '模块一：团体心理辅导基础',
      lessons: [
        '团体心理辅导的理论基础',
        '团体动力学与团体发展阶段',
        '团体辅导者的角色与技能'
      ]
    },
    {
      title: '模块二：班会活动设计与实施',
      lessons: [
        '主题班会的设计原则',
        '互动活动的组织与引导',
        '班会中的心理游戏与应用'
      ]
    },
    {
      title: '模块三：特殊问题的团体干预',
      lessons: [
        '学业压力与考试焦虑的团体辅导',
        '人际关系问题的团体活动',
        '自我认同与成长的团体辅导'
      ]
    },
    {
      title: '模块四：评估与持续改进',
      lessons: [
        '团体活动效果的评估方法',
        '常见问题与应对策略',
        '个案分析与经验分享'
      ]
    }
  ]
});

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<template>
  <div class="course-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <el-icon><ArrowLeft /></el-icon>
      <span>返回课程列表</span>
    </div>

    <!-- 课程主要内容区域 -->
    <div class="course-main">
      <!-- 课程内容 -->
      <div class="course-content">
        <!-- 课程标题 -->
        <h1 class="course-title">{{ courseInfo.title }}</h1>

        <!-- 课程简介已移除 -->

        <!-- 视频播放区域 -->
        <div class="video-container">
          <video controls class="course-video">
            <source src="/vedio/团体心理辅导实战指南：在班会与活动中促进学生成长.mp4" type="video/mp4">
            您的浏览器不支持视频播放
          </video>
        </div>

        <!-- 操作按钮已移除 -->
      </div>
    </div>
  </div>
</template>

<style scoped>
.course-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.back-button {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
  color: #409EFF;
}

.back-button span {
  margin-left: 5px;
}

.course-main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.course-content {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.action-buttons-container {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.video-container {
  margin: 20px 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  padding-top: 56.25%; /* 16:9 比例 */
}

.course-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.course-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #303133;
}

.course-brief {
  margin-bottom: 30px;
  line-height: 1.6;
  color: #606266;
}

.video-container {
  width: 100%;
  height: 400px;
  background-color: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 30px;
  overflow: hidden;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ebeef5;
}

.play-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(64, 158, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
}

.play-icon i {
  font-size: 40px;
  color: white;
}

.course-section {
  margin-bottom: 40px;
}

.course-section h2 {
  font-size: 22px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.objectives-list {
  list-style: none;
  padding: 0;
}

.objectives-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.check-icon {
  color: #67c23a;
  margin-right: 10px;
  font-size: 18px;
}

.module-lessons {
  padding: 10px 0;
}

.lesson-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.lesson-item i {
  margin-right: 10px;
  color: #409EFF;
}

.info-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.instructor-info {
  margin-bottom: 20px;
}

.instructor-info h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.instructor {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #dcdfe6;
  margin-right: 10px;
}

.name {
  font-weight: bold;
}

.instructor-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.course-meta {
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #606266;
}

.meta-item i {
  margin-right: 10px;
  color: #409EFF;
}

.action-buttons {
  display: flex;
  flex-direction: column;
}

.enroll-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  margin-bottom: 15px;
}

.secondary-actions {
  display: flex;
  justify-content: space-between;
}
</style>